<template>
	<view>
		<!-- F1: 路径导航（面包屑） -->
		<xzBreadcrumb :paths="pathList"/>
		<!-- F2: 图片轮播 -->
		<!-- indicator-dots：是否显示指示用的小圆饼 -->
		<!-- autoplay：是否自动播放 -->
		<!-- interval：两个广告间隔时长 -->
		<!-- duration：一个广告切换动画持续时长 -->
		<swiper indicator-dots autoplay :interval="3000" :duration="1000" style="height:750rpx;">
			<swiper-item v-for="{pid, md} in product.picList" :key="pid">
				<view class="swiper-item">
					<image :src="base+md" mode="widthFix" style="width:750rpx;"/>
				</view>
			</swiper-item>
		</swiper>
		<!-- F3: 商品标题详情  -->
		<text class="product-title">{{product.title}}</text>
		<text class="product-subtitle">{{product.subtitle}}</text>
		<view class="f3">
			<text>学员售价：￥{{product.price}}</text>
			<text>服务承诺：{{product.promise}}</text>
		</view>
		<!-- F4: 规格列表 -->
		<view class="f4">
			<text>规格：</text>
			<view>
				<uni-tag 
				class="tag"
					v-for="{lid, spec} in family.laptopList"  
					:key="lid"
					:text="spec" 
					:type="lid===product.lid ? 'primary' : 'default' " 
					inverted
					@click="goToDetails(lid)"
				/>
			</view>
		</view>
		<!-- F5: 加入购物车 -->												
		<view class="f5">
			<text>数量：{{buyCount}}</text>
			<!-- uni-ui库提供的组件：uni-number-box -->
			<uni-number-box background="#0aa1ed" color="#fff" :min="1" :max="9" v-model="buyCount"/>
		</view>
		
		<!-- F6: 为您推荐：通栏卡片中放置一个水平滚动视图 -->
		<uni-card title="为您推荐" is-full>
			<!-- 注意：scroll-view中如果有多个元素，默认一定会换行；如果只有一个元素，则可以水平滚动 -->
			<scroll-view scroll-x>
				<view class="suggest-list">
					<!-- TODO: 此处的“推荐”应该从服务器端接口中异步请求 -->
					<view class="suggest">
						<image src="https://web.codeboy.com/xuezi/img/product_detail/product_detail_1.png" mode="widthFix"/>
						<text>ThinkPad New S2</text>
					</view>
					<view class="suggest">
						<image src="https://web.codeboy.com/xuezi/img/product_detail/product_detail_2.png" mode="widthFix"/>
						<text>戴尔燃7000</text>
					</view>
					<view class="suggest">
						<image src="https://web.codeboy.com/xuezi/img/product_detail/product_detail_3.png" mode="widthFix"/>
						<text>戴尔魔方15MF</text>
					</view>
					<view class="suggest">
						<image src="https://web.codeboy.com/xuezi/img/product_detail/product_detail_4.png" mode="widthFix"/>
						<text>联想YOGA900 </text>
					</view>
				</view>
			</scroll-view>
		</uni-card>
		
		<!-- F7: 商品详细介绍 -->
		<uni-card title="商品详情" is-full>
			<!-- <text>{{product.details}}</text> -->
			<!-- nodes：节点列表（一个HTML元素称为一个“Node”） -->
			<!-- <rich-text nodes="<h1>标题</h1><hr/><hr/>"></rich-text> -->
			<rich-text :nodes="product.details"></rich-text>
		</uni-card>
		
		<!-- F7.5: 空白楼层，为了填补八楼遮住的区域 -->
		<view class="f75"></view>
		<!-- F8: 加入购物车（固定定位在页面底部）： uni-ui库提供的组件：uni-goods-nav -->
		<view class="f8">
			<!-- fill：是否平铺，即是否按钮显示为圆角 -->
			<!-- options：选项组 -->
			<!-- button-group：按钮组 -->
			<uni-goods-nav :fill="true" :options="options" :button-group="btnGroup" @click="doOptionsClick" @buttonClick="doBtnGroupClick" />
		</view>
	</view>
</template>

<script>
import { productDetails,base, cartAdd } from '@/service'
	export default {
		data() {
			return {
				base,				//把导入的局部变量声明为模型数据
				family: {},			//当前商品所在的“型号/家族/系列”信息
				product: {},		//当前商品信息 
				pathList: [			//当前页面所在的“路径导航”
					{title:'首页',url:'/pages/index/index',openType:'switchTab'},
					{title:'品牌馆',url:'/pages/brands/brands',openType:'switchTab'},
					{title:'商品列表',url:'/pages/list/list',openType:'navigate'},
					{title:'商品详情'}
				],
				buyCount: 1,		//当前商品希望的购买数量
				options: [			//选项小组
					{icon:'headphones', text:'客服'},
					{icon:'cart', text:'购物车', info:0},
				],
				btnGroup: [			//按钮小组
					{text:'立即购买', backgroundColor: 'linear-gradient(90deg, #60F3FF, #088FEB, #1E83FF, #0053B8)', color:'#fff'},
					{text:'添加到购物车', backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18, #FE6035, #EF1224)',color:'#fff'},
					// {text:'立即购买', backgroundColor:'#0aa1ed', color:'#fff'},
					// {text:'添加到购物车', backgroundColor:'#ed0a0a', color:'#fff'},
				],
			}
		},
		//生命周期方法 —— 页面加载时
		async onLoad({pid}){
			//读取上一个页面传递过来的路由参数——要查询的商品编号
			//console.log(pid)
			if(!pid){
				//如果当前处于开发测试阶段，有可能在地址栏没有路由参数pid；跳转回列表页
				uni.navigateTo({
					url: '/pages/list/list'
				})
				return
			}
			//向服务器发起异步请求，获取该商品的详情
			let data = await productDetails(pid)
			/*****************对服务器端返回的数据进行处理********************/
			//1.把所有的 src="img 替换为 src="https://web.codeboy.com/xuezi/img
			data.product.details = data.product.details.replace(/src="img/g, `src="${base}img`)
			//2.把所有的 <img 替换为 <img style="width:100%"
			data.product.details = data.product.details.replace(/<img/g, '<img style="width:100%"')
			/***************************************************************/
			this.family = data.family			//商品所在的家族/型号信息
			this.product = data.product			//商品本身信息
			//修改页面导航条标题，为当前商品型号名
			uni.setNavigationBarTitle({
				title: this.family.fname
			})
		},
		methods: {
			doOptionsClick({index}){
				if(index===0){
					console.log('第一个选项：客服-被点击了')
				}else if(index===1){
					console.log('第二个选项：购物车-被点击了')
				}
			},
			async doBtnGroupClick({index}){
				if(index===0){
					console.log('立即购买-被点击了')
				}else if(index===1){
					//console.log('添加到购物车-被点击了')
					//1.判断当前用户是否登录了，
					let token = uni.getStorageSync('userToken')
					if(token){	//用户已经登录了，直接调用“添加到购物车”接口方法
						let data = await cartAdd(this.product.lid, this.buyCount)
						//console.log('购物车添加结果：', data)
						if(data.code===200){ //购物车添加成功
							this.options[1].info = data.buyCount //修改“购物车”上显示的数量
						}else { //购物车添加失败
							
						}
					}else {  //没登录，跳转到登录页（同时保证登录完成后，跳转回当前商品页）
						//把当前页面的地址及请求参数保存在客户端——即“登录原因页”
						uni.setStorageSync('loginReason', this.$route.fullPath)
						//跳转到登录页
						uni.switchTab({ url: '/pages/userCenter/userCenter' })
					}
				}
			},
			goToDetails(num){
				uni.navigateTo({
					url:'/pages/details/details?pid=' + num
				})
			}
		}
	}
</script>

<style lang="scss">
	.product-title{
		background-color: #fff;
		padding: $uni-spacing-col-base $uni-spacing-row-base;
		
	}
	.product-subtitle{
			background-color: #fff;
			color: grey;
			padding: $uni-spacing-col-base $uni-spacing-row-base;
		}
.f3{
	margin: $uni-spacing-col-base $uni-spacing-row-base;
}
.f4{
	flex-direction: row;
	padding:0 $uni-spacing-row-base;
	
	.tag{
		margin: $uni-spacing-col-sm $uni-spacing-row-base;
	}
}
	.f5{
		flex-direction: row;
		padding: $uni-spacing-col-base $uni-spacing-row-base;
		text{
			margin-right: $uni-spacing-row-base;
		}
	}	
.f75 {
	height: 60px;		//此处的高度只要超过八楼的高度即可
}
.f8 {
	//八楼固定定位在页面底部	
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	border-top: $uni-border-width $uni-border-style $uni-border-color;
	box-shadow: 0 0 $uni-shadow-radius-base $uni-border-color;
}
.suggest-list {	
	display: flex;			//显示模式：弹性容器	
	flex-direction: row;	//弹性容器主轴方向为横向
	flex-wrap: nowrap;		//弹性容器不允许子元素换行
	.suggest {
		align-items: center;//弹性容器中的子元素在横向上（交叉轴上）居中对齐
		width: 260rpx;		//控制宽度，让一行大约显示2个半“建议”
		flex-shrink: 0;		//弹性子元素在父元素宽度不够时，不参与尺寸的收缩
		image { width: 80%; }
	}
}
</style>
